<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cool.js</title>
<style>
    html,body{
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    }
</style>
    <script src="../dist/bundle.js"></script>

</head>
<body  oncontextmenu=self.event.returnValue=false>
    <canvas id="webgl" width="600" height="600">
        Please use a browser that supports "canvas"
    </canvas>
    <div id="param">

    </div>
</body>
<script src="../lib/dat.gui.min.js"></script>
<script>
//    document.getElementById('test').innerHTML = new POINT(1,2).toString();

var materialPoint = new COOL.PointMaterial({color:[1,0,0,1]});
var materialPlane = new COOL.MeshLambertMaterial({color:[1,1,1,1]});

let point = new COOL.Point({
    material: materialPoint,
    size: 20,
});
point.setPosition([0,3,0]);

    var plane = new COOL.Mesh({material:materialPlane, geometry:new COOL.BoxGeometry()});
    plane.setPosition([0,-3,0]);
    plane.setScale([20,1,15]);


var scene = new COOL.Scene();
scene.add(plane);
scene.add(point);

    var ambientLight = new COOL.AmbientLight({intensity: 0.6});
    scene.add(ambientLight);

    var directionalLight = new COOL.DirectionalLight({intensity: 1.0, direction: [0.5,0.8,0.2]});
    scene.add(directionalLight);

    var camera = new COOL.Camera(30,1,1,1000);

    camera.setPosition([5, 8, 35]);

    var cameraController = new COOL.CameraController(camera);
    cameraController.update();

    var renderer = new COOL.Renderer({
        useShadow:true,
        skyBox:[
            './skyBox/sky2/1_RT.jpg',
            './skyBox/sky2/1_LF.jpg',
            './skyBox/sky2/1_UP.jpg',
            './skyBox/sky2/1_DN.jpg',
            './skyBox/sky2/1_BK.jpg',
            './skyBox/sky2/1_FR.jpg',
        ],
        useSkyBox:true,
    });

    function renderLoop() {
       renderer.render(scene,camera);
       requestAnimationFrame(function () {
           renderLoop();
       });
    }

    renderLoop();

function createPanel() {

    var panel = new dat.GUI( { width: 200 } );

    var folder1 = panel.addFolder( '选项' );

    var settings = {
        '阴影': true,
        '环境光': 0.6,
        '平行光': 1,
        '天空盒': true
    };

    folder1.add( settings, '阴影' ).onChange( showShadow );
    folder1.add( settings, '环境光', 0, 1.5  ).onChange( changeAmb);
    folder1.add( settings, '平行光', 0, 1.5  ).onChange( changeDir);
    folder1.add( settings, '天空盒').onChange( showSkyBox );

    folder1.open();

}
createPanel();

function showShadow(v) {
    renderer.useShadow = v;
}

function changeAmb(v) {
    ambientLight.intensity = v;
}

function changeDir(v) {
    directionalLight.intensity = v;
}

function showSkyBox(v) {
    renderer.useSkyBox = v;
}

</script>
</html>
